import SingleUpload from '../../../common/singleUpload'
import '../../../../../style/less/formStyle.less'
import React from 'react'
import { Form, Input, Button,Icon,InputNumber } from 'antd';
import {inject, observer} from "mobx-react/index";
const FormItem = Form.Item;
import Tip from "../../../common/tip"
@inject("store")
@observer
class BaseInfo extends React.Component {
    state = {
        confirmDirty: false,
    };
    componentDidMount() {
        // To disabled submit button at the beginning.
        this.props.store.actions.getBaseInfo()
        this.props.form.validateFields();
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                this.props.toggle(true)
                this.props.store.actions.launchBaseInfo(values,this.props.toggle)
            }
        });
    }
    handleConfirmBlur = (e) => {
        const value = e.target.value;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    }
    hasErrors = (fieldsError) => {
        return Object.keys(fieldsError).some(field => fieldsError[field]);
    }
    getKey = (key)=>{
        this.props.store.baseInfo.headimg=key
    }
    render() {
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched} = this.props.form;
        const formItemLayout = {
            labelCol: {
                sm: { span: 4 },
            },
            wrapperCol: {
                sm: { span: 16 },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                sm: {
                    span: 4,
                    offset: 4,
                },
            },
        };
        const nameError =  isFieldTouched('userName') &&getFieldError('userName');
        const contactError = isFieldTouched('userQq') &&getFieldError('userQq');
        const addressError =  isFieldTouched('userWechat') &&getFieldError('userWechat');
        const store=this.props.store
        return (
            <div>
                <Tip title="基本信息"/>
                    <div>
                        {store.status === "0" ?
                            <div>
                                <div style={{position:"relative",verticalAlign:"middle",marginBottom:"10px"}}>
                                    <span className="certifi-front">头像</span>
                                    <span className="certifi-back"><img className="certifi-img" src={store.baseInfo.finalHeadPath==null?"http://pavb1z1iv.bkt.clouddn.com/FnEqr_BWWBgewX7nzbeo9XA8Hmih":store.baseInfo.finalHeadPath}/></span>
                                </div>
                                <div style={{position:"relative",verticalAlign:"middle"}}>
                                    <span className="certifi-front">用户名</span>
                                    <span className="certifi-back">{store.baseInfo.userName}</span>
                                </div>
                                <div style={{position:"relative",verticalAlign:"middle"}}>
                                    <span className="certifi-front">QQ</span>
                                    <span className="certifi-back">{store.baseInfo.userQq}</span>
                                </div>
                                <div style={{position:"relative",verticalAlign:"middle"}}>
                                    <span className="certifi-front">微信</span>
                                    <span className="certifi-back">{store.baseInfo.userWechat}</span>
                                </div>
                                <div style={{position:"relative",verticalAlign:"middle"}}>
                                    <span className="certifi-back"><Button type="primary" onClick={()=>store.status="1"}>修改信息</Button></span>
                                </div>
                            </div>:
                            <div>{(store.baseInfo.userName!=undefined&&store.status==="1")?
                                <Form onSubmit={this.handleSubmit}>
                                    <SingleUpload getKey={this.getKey} finalPath={store.baseInfo.finalHeadPath} alt={"头像:"}/>
                                    <FormItem
                                        {...formItemLayout}
                                        label="用户名"
                                        validateStatus={nameError ? 'error' : ''}
                                        help={nameError || ""}
                                    >
                                        {getFieldDecorator('userName', {
                                            initialValue:store.baseInfo.userName,
                                            rules: [{required: true, message: '请输入用户名!'}],
                                        })(
                                            <Input onBlur={this.handleConfirmBlur}/>
                                        )}
                                    </FormItem>
                                    <FormItem
                                        {...formItemLayout}
                                        label="QQ"
                                        validateStatus={contactError ? 'error' : ''}
                                        help={contactError || ""}
                                    >
                                        {getFieldDecorator('userQq', {
                                            initialValue:store.baseInfo.userQq,
                                            rules: [ {min:6,max:12,message:"QQ长度在6到12位"}],
                                        })(
                                            <Input onBlur={this.handleConfirmBlur}/>
                                        )}
                                    </FormItem>
                                    <FormItem
                                        {...formItemLayout}
                                        label="微信"
                                        validateStatus={addressError ? 'error' : ''}
                                        help={addressError || ""}
                                    >
                                        {getFieldDecorator('userWechat', {
                                            initialValue:store.baseInfo.userWechat,
                                            rules: [{ min:5,max:20,message:"微信长度在5到20位"}],
                                        })(
                                            <Input onBlur={this.handleConfirmBlur}/>
                                        )}
                                    </FormItem>
                                    <FormItem {...tailFormItemLayout}>
                                        <Button type="primary" htmlType="submit"
                                                disabled={this.hasErrors(getFieldsError())}>保存</Button>
                                    </FormItem>
                                </Form>:""}
                            </div>
                            }
                    </div>
            </div>
        );
    }
}
const BaseInfor = Form.create()(BaseInfo);
export default BaseInfor